<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="the-player">
<head>
<title>PLAYER!</title>

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="en" />
<meta name="author" content="Dominic Bestler" />
<meta name="keywords" content="FIXME" />
<meta name="description" content="FIXME" />
<link rel="stylesheet" href="/css/cupertino/jquery-ui-1.8.13.custom.css"> 
<link rel="stylesheet" href="/css/cupertino/jquery.ui.selectmenu.css"> 
<link rel="stylesheet" id="theme" href="/js/humane-themes/bold-dark.css"/>
<script src="/js/humane.min.js"></script>
<script src="/js/jquery-1.5.1.min.js"></script> 
<script src="/js/jquery-ui-1.8.13.custom.min.js"></script> 
<script src="/js/jquery.ui.selectmenu.min.js"></script> 

<style>
	body { font-size: 75%; }
	label, input,select,.ui-select-menu  { display:block; }
	input.text { margin-bottom:12px; width:95%; padding: .4em; }
	fieldset { padding:0; border:0; margin-top:25px; }
	h1 { font-size: 1.2em; margin: .6em 0; }
	div#users-contain { width: 350px; margin: 20px 0; }
	div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
	div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
	.ui-dialog .ui-state-error { padding: .3em; }
	.validateTips { border: 1px solid transparent; padding: 0.3em; }

	select { margin-bottom:12px; width:150px; padding: .4em; }		
	.wrap span.ui-selectmenu-item-header,
	.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }
</style>

<script>

$(function() {
	// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
	//$( "#dialog:ui-dialog" ).dialog( "destroy" );
	
	var playername = $( "#playername" ); 
	var email = $( "#email" );
	var rankinglist = $( "#rankinglist" );
	var allFields = $( [] ).add( playername ).add( email ).add(rankinglist);
	var tips = $( ".validateTips" );

	function updateTips( t ) {
		tips
			.html( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 1500 );
	}

	function isNotEmpty( o, oname ) {
		if ( o.val().length < 1 ) {
			o.addClass( "ui-state-error" );
			updateTips( "<b>"+oname + "</b> must not be empty." );
			return false;
		} else {
			return true;
		}
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}
	
	
	$("select#rankinglist").selectmenu();
	
	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 350,
		width: 350,
		modal: true,
		buttons: {
			"Register player": function() {
				tips.text("All fields are required.");
				allFields.removeClass( "ui-state-error" );
				
				var bValid = true;
				bValid = bValid && isNotEmpty(playername, "Player's name");
				bValid = bValid && isNotEmpty(email, "Email");
				if ( bValid ) {
					createPlayer({"playername":playername.val(),"email":email.val(),"rankinglist":rankinglist.val()}, 
						function(data) {
							//showLoading(false);
							if (typeof data.errors == 'undefined') {
         						humane("Welcome " + data.playername + "!<br/>Please sign in.");
         						$("#dialog-form").dialog("close");
							} else {
								var errorMessages = "";
								if (data.errors.error.length > 0) {
									$.each(data.errors.error, function(i, errorMessage) {
										errorMessages = errorMessages + "<b>Error</b>: " + errorMessage +
											"<br/>Please try again in a few seconds or report this problem to the developer: " +
											"<a href='mailto:dbestler@gmail.com?" + 
											"subject=Sign%20up%20failed&amp;" + 
											"body=Oh%20no!%0D%0A%0D%0ARegistration%20was%20not%20successful.%0D%0A%0D%0APlayername:%20" + playername.val() + "%0D%0AEmail:%20" + email.val() + "%0D%0ARankinglist:%20" + rankinglist.val() + "'>Contact</a>";
									});
								}
								if (data.errors.playername.length > 0) {
									playername.addClass( "ui-state-error" );
									$.each(data.errors.playername, function(i, playernameMessage) {
										errorMessages = errorMessages + "<b>Player's name</b>: " + playernameMessage +"<br/>";
									});
								}
								if (data.errors.email.length > 0) {
									email.addClass( "ui-state-error" );
									$.each(data.errors.email, function(i, emailMessage) {
										errorMessages = errorMessages + "<b>Email</b>: " + emailMessage + "<br/>";
									});
								}
								if (data.errors.rankinglist.length > 0) {
									rankinglist.addClass( "ui-state-error" );
									$.each(data.errors.rankinglist, function(i, rankinglistMessage) {
										errorMessages = errorMessages + "<b>Ranking list</b>: " + rankinglistMessage + "<br/>";
									});
								}
								updateTips(errorMessages);
							}
							
						});
						
				}
				
				
				//var bValid = true;
				//allFields.removeClass( "ui-state-error" );

				//bValid = bValid && checkLength( playername, "playername", 3, 16 );
				//bValid = bValid && checkLength( email, "email", 6, 80 );

				//bValid = bValid && checkRegexp( playername, /^[a-z]([0-9a-z_])+$/i, "Playername may consist of a-z, 0-9, underscores, begin with a letter." );
				// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
				//bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );

				//if ( bValid ) {
					//$( "#users tbody" ).append( "<tr>" +
					//	"<td>" + playername.val() + "</td>" + 
					//	"<td>" + email.val() + "</td>" + 
					//"</tr>" ); 
					//$( this ).dialog( "close" );
				//}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		},
		open: function() {
			tips.text("All fields are required.");
		}
	});

	$( "#create-user" ).button().click(function() {
			$( "#dialog-form" ).dialog( "open" );
	});
	
	//FIXME give callback function here? need to do the success stuff in this function IN DIALOG??
	function createPlayer(dataMap, processor) {
		$.ajax({
			type: "POST", 
		    url: "/rest/players",
		    data: dataMap,
		    //beforeSend: function(){
			///	showLoading(true);
		    //},
		    success: processor
		});
	}


});
</script>



</head>


<jsp:useBean id="playerSession" scope="session" class="com.player.jsp.SessionBean" /> 

<body>
	<jsp:include page="header.jsp"/>
    
    <div class="demo"> 
 
<div id="dialog-form" title="Register as Player"> 
	<p class="validateTips"></p> 
 
	<form> 
	<fieldset>
		<label for="playername">Player's name</label> 
		<input type="text" name="playername" id="playername" class="text ui-widget-content ui-corner-all" /> 
		<label for="email">Email</label> 
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="rankinglist">Ranking list</label>
		<select name="rankinglist" id="rankinglist">
			<option value="MEN" selected="selected">Men</option>
			<option value="WOMEN">Women</option> 
		</select> 
	</fieldset> 
	</form> 
</div> 
 
</div>
 
    <br/><br/><br/>

    <br/><br/><hr/><br/>
    <div id="content_registration" align="center">
    	
    	<h2>REGISTRATION</h2>
    	
	   	<% if (playerSession.isLoggedIn() && playerSession.isRegistered()) { %>
      		Please <a href="<%= playerSession.createLogoutURL(request.getRequestURI()) %>">logout</a> first and continue with the registration.
	    <% } else {%>
		    <div align="center">
	    		<span>YES I do<br/><button id="create-user">Register</button></span> &nbsp; &nbsp; <span>NO I don't.</span>
	    	</div>
	    <% } %>
    </div>
    
    <br/><hr/><br/><br/>
    
    <br/>

    <% if (playerSession.isDebug()) { %>
      <jsp:include page="sessioncontents.jsp"/>
    <% } %>
    
  </body>
</html>